import React, { useEffect, useMemo, useState } from 'react';
import { Button, Modal, Form, Input, Select } from 'antd';
import {
  createUser,
  CreateUserParamsInter,
  updateUser,
  UpdateUserParamsInter,
} from '@/service/userNew';

interface TableModalPropsInter {
  isModalOpen: boolean;
  onSuccess: () => void;
  changeIsOpen: () => void;
  editData: UpdateUserParamsInter | {};
}
export default function TableModal(props: TableModalPropsInter) {
  const handleOk = () => {};
  const handleCancel = () => {
    props.changeIsOpen();
  };
  const onFinish = async (value: CreateUserParamsInter) => {
    if (props.editData?.phone) {
      await updateUser({ ...props.editData, ...value });
      console.log('编辑成功！编辑的数据是：', { ...props.editData, ...value });
    } else {
      await createUser(value);
      console.log('新增成功！数据是：', value);
    }
    props.onSuccess();
  };
  const onFinishFailed = () => {};
  const selectOptions = [
    { value: 0, label: '禁用' },
    { value: 1, label: '启用' },
  ];
  const validateMessages = {
    required: '请填写${label}',
  };
  const [form] = Form.useForm();
  const [title, setTitle] = useState<string>('');
  // 监听传入的数据
  // 1. 根据传入数据的值，来判断是编辑还是新增，以此来更新form的数据或者重置form的数据
  // 2. 根据传入数据的值，来判断是编辑还是新增，以此来判断title的显示
  useEffect(() => {
    if (props.editData?.phone) {
      form.setFieldsValue(props.editData);
      setTitle('编辑人员');
    } else {
      form.resetFields();
      setTitle('新增人员');
    }
  }, [props.editData]);
  // 如果只有根据值来判断title的逻辑，那么就要用到useMemo  不要使用 state
  const title2 = useMemo(() => {
    return props.editData?.phone ? '编辑人员' : '新增人员';
  }, [props.editData]);
  return (
    <Modal
      title={title2}
      open={props.isModalOpen}
      onOk={handleOk}
      onCancel={handleCancel}
      footer={null}
    >
      <Form
        name="basic"
        form={form}
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ phone: '', name: '', status: '' }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        validateMessages={validateMessages}
      >
        <Form.Item label="人员姓名" name="name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>

        <Form.Item
          label="手机号"
          name="phone"
          rules={[
            { required: true },
            // {
            //   validator(rule, value, callback) {
            //     if (value.length < 11) {
            //       callback('手机号错误！');
            //       //   throw new Error('手机号错误！');
            //     } else {
            //       callback();
            //     }
            //   },
            // },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="用户状态"
          name="status"
          rules={[{ required: true, message: '请选择用户状态' }]}
        >
          <Select options={selectOptions} />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
}
